<template>
  <div class="saveUpdate">
    <el-dialog :title="id?'编辑常用语配置':'新增公告配置'" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
               :showUpdate="showUpdate" width="500px">
      <el-form :model="DetailInfo" ref="saveChn" label-width="150px" size="mini">
        <dialog-wrapper :MaxWidth="400">
          <el-form-item label="公告标题：" prop="title" :rules="[{ required: true, message: '公告标题不能为空'}]">
            <el-input v-model="DetailInfo.title" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="公告内容：" prop="context" :rules="[{ required: true, message: '公告内容不能为空'}]">
            <el-input type="textarea" v-model="DetailInfo.context" placeholder="请输入内容" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="生效时间：" prop="start_at" :rules="[{ required: true, message: '生效时间不能为空'}]">
            <div class="block">
              <el-date-picker
                v-model="DetailInfo.start_at"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                placeholder="选择日期时间" style="width: 250px">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间：" prop="end_at" :rules="[{ required: true, message: '结束时间不能为空'}]">
            <div class="block">
              <el-date-picker
                v-model="DetailInfo.end_at"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                placeholder="选择日期时间" style="width: 250px">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="渠道包名(,分隔)：" prop="pkg" :rules="[{ required: true, message: '渠道包名不能为空'}]">
            <el-input v-model="DetailInfo.pkg"
                      placeholder="所有渠道包名请填写all"></el-input>
          </el-form-item>
          <el-form-item label="手机系统(,分隔)：" prop="system" :rules="[{ required: true, message: '手机系统不能为空'}]">
            <el-input v-model="DetailInfo.system"
                      placeholder="所有手机系统请填写all"></el-input>
          </el-form-item>
          <el-form-item label=" 渠道(,分隔)：" prop="chn" :rules="[{ required: true, message: '渠道不能为空'}]">
            <el-input v-model="DetailInfo.chn"
                      placeholder="所有渠道请填写all"></el-input>
          </el-form-item>
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', false)" size="small">取 消</el-button>
        <el-button v-if="id" type="primary" :loading="loading" @click="updateDetail" size="small">确 定
        </el-button>
        <el-button v-else type="primary" :loading="loading" @click="saveDetail" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import {getBulletinById, updateBulletinById, addBulletin} from '@/api'

  export default {
    components: {DialogWrapper},
    data() {
      return {
        showDialog: this.showUpdate,
        loading: false,
        DetailInfo: {type: '1'},
        imageUrl: ''
      }
    },
    props: {
      showUpdate: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number
      },
    },
    created() {
      if (this.id) {
        this.getDetail()
      }
    },
    methods: {
      saveDetail() {
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            addBulletin(this.DetailInfo).then(res => {
              if (res.status === 0) {
                this.$message({type: 'success', message: '添加成功'})
                this.$emit('update:showUpdate', false)
              }
            })
          }
        })
      },
      updateDetail() {
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            updateBulletinById(this.id, this.DetailInfo).then(res => {
              if (res.status === 0) {
                this.$message({type: 'success', message: '编辑成功'})
                this.$emit('update:showUpdate', false)
              }
            })
          }
        })
      },
      getDetail() {
        getBulletinById(this.id).then(res => {
          if (res.status === 0) {
            this.DetailInfo = res.data
          }
        })

      },
    }
    ,
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
